<template>
    <view class="page">
        <hj-navbar title="消息详情" />
        <view class="pl-30 pr-30">
            <view class="column center pt-20 pb-30">
                <view class="ft-36 t-3 bold">
                    快来报名，汇杰一千米第一期学院火热招募中快来报名，汇杰一千米第一期学院火热
                </view>
                <view class="t-9 ft-26 mt-12">发布日期：2025-03-01</view>
            </view>
            <view class="ft-30 t-3 main">
                <u-parse :content="content" :tagStyle="style" :previewImg="false"></u-parse>
            </view>
        </view>
        <hj-safe-footer />
        <hj-loading :show="loading" :z-index="20" />
    </view>
</template>

<script setup>
/**
 * @description 消息详情页面
 * @author yinzhi
 * @date 2025-03-18
 */
import { onLoad } from '@dcloudio/uni-app'
import { logger } from '@/utils/log.js'
import { ref } from 'vue'

// 加载状态
const loading = ref(false)
// 内容详情
const content = ref('')

onLoad(() => {
    getDetails()
})

const getDetails = async () => {
    try {
        loading.value = true
        content.value = `<div>
        <p style="text-indent: 2em;">汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募</p>
        <p style="text-indent: 2em;">汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米第一期学院火热招募中汇杰一千米</p>
        <img src="https://ai-app01.oss-cn-guangzhou.aliyuncs.com/mpweixin/drone/data-bg.jpg"/></div>`
        let time = setTimeout(() => {
            loading.value = false
            clearTimeout(time)
        }, 1000)
    } catch (error) {
        logger.error({ '[getDetails]-消息详情获取失败：': error })
    }
}
// 自定义一些标签样式
const style = {
    img: 'max-width: 100%;max-height: none;margin: 0;display: block;',
    p: 'margin-bottom: 6px'
}
</script>

<style scoped lang="scss">
.main {
    line-height: 1.6;
}
</style>
